<style>
    .layui-form-label {
        width: 100px;
    }

    .layui-input-block {
        margin-left: 130px;
    }

    .msgtag {
        margin-left: 15px;
    }

    .msgtag .layui-badge {
        margin-bottom: 10px;
        cursor: pointer;
    }

    .el-input__inner,
    .el-cascader {
        line-height: 30px !important;
        height: 30px !important;
    }
</style>
<div class="rightcontent rc-bg-grey">
    <div class="rc-pagepadding ">
        <div class=" rc-pannel layui-form">
            <div class=" rc-pannel-header rc-pagepadding rc-bold">
                <i class="iconfont goback rc-pointer">&#xe62b;</i> 添加消息模板
            </div>
            <div class="rc-pannel-body  rc-pagepadding">


                <div class="layui-form-item">
                    <label class="layui-form-label">挂载事件钩子</label>
                    <div class="layui-input-block">
                        <input type="text" id="hookident" name="hookident" autocomplete="off" value="" lay-verify="required" class="layui-input" title="" />
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">消息编号 <i class="layui-icon layui-icon-question rc-tips rc-pointer" message="一般SMS手机短信需要" style=" color: #7D8388;"></i></label>
                    <div class="layui-input-block">
                        <input type="text" name="msgid" autocomplete="off" value="" class="layui-input" />

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">标题 <i class="layui-icon layui-icon-question rc-tips rc-pointer" message="SMS短信一般为空" style=" color: #7D8388;"></i></label>
                    <div class="layui-input-block">
                        <input type="text" name="title" autocomplete="off" value="" class="layui-input"  />

                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">内容 <i class="layui-icon layui-icon-question rc-tips rc-pointer" message="SMS短信一般为空,右侧如有标签可点击直接插入到内容中,参数格式：{#code#}。" style=" color: #7D8388;"></i></label>
                    <div class="layui-input-block">
                        <div class="rc-flex">
                            <div class="rc-flex1"><textarea class="layui-textarea" id="content" name="content"></textarea></div>
                            <div style="width: 200px;display:none" class="msgtag" id="templatetags">

                            </div>
                        </div>

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">发送通道</label>
                    <div class="layui-input-block">
                        <?php
                        foreach ($channels as $channel) {
                        ?>
                            <input type="checkbox" name="channel[]" value="<?php echo $channel['id'] ?>" title="<?php echo $channel['title'] ?>" />
                        <?php
                        } ?>
                    </div>
                </div>

                <div class="layui-form-item">


                    <div class="layui-form-item rc-margin-bottom0">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-submit lay-filter="submit">提交</button>
                            <button type="reset" class="layui-btn layui-btn-sm">重置</button>
                        </div>
                    </div>
                </div>



            </div>

        </div>
    </div>
    <script src="/static/admin/lib/layui/modules/cascader/cascader.js"></script>

    <script>
        layui.use(function() {

            var form = layui.form;

            var layCascader = layui.layCascader;

            var el_hooks = '<?php echo $hooks ?>';
            var el_hooks_obj = $.parseJSON(el_hooks);
            var el_cascader = layCascader({
                elem: '#hookident',
                filterable: true,
                options: el_hooks_obj,
                props: {
                    value: 'ident',
                    label: 'title',
                },

            });


            el_cascader.changeEvent(function(value, Node) {
                $('#templatetags').html('');
                $('#templatetags').hide();
                getHookParam(value);
            });

            function getHookParam(eventhookident) {
                $.ajax({
                    url: '/admin/cnf/Message/addTemplate?type=getHookParam&eventhookident=' + eventhookident, //请求路径
                    type: "GET", //请求方式
                    success: function(data) {
                        if (data.code == 0) {
                            if (data.data.param) {
                                $('#templatetags').show();
                                var params = $.parseJSON(data.data.param);
                                var tags = '';
                                $.each(params, function(i, v) {

                                    tags += ' <span class="layui-badge layui-bg-cyan templatetag" val="{#' + i + '#}">' + v + '</span>';
                                });
                                tags += ' <span class="layui-badge layui-bg-cyan templatetag" val="{#username#}">用户名</span>';
                                tags += ' <span class="layui-badge layui-bg-cyan templatetag" val="{#name#}">姓名</span>';
                                $('#templatetags').html(tags);
                            }

                        }

                    },
                    error: function() {

                    },

                });

            }

            function insertTextAtCursor(text) {
                var textarea = document.getElementById("content");
                var cursorPosition = textarea.selectionStart; // 获取光标位置
                var textBeforeCursor = textarea.value.substring(0, cursorPosition); // 光标前的文本
                var textAfterCursor = textarea.value.substring(cursorPosition, textarea.value.length); // 光标后的文本
                textarea.value = textBeforeCursor + text + textAfterCursor; // 插入指定文本

                // 更新光标位置到插入文本的末尾
                textarea.selectionStart = textarea.selectionEnd = cursorPosition + text.length;
            }

            $('body').on('click', '.templatetag', function() {
                insertTextAtCursor($(this).attr('val'));
            });

            form.on('submit(submit)', function(data) {
                $.ajax({
                    url: '/admin/cnf/Message/addTemplate', //请求路径
                    type: "POST", //请求方式
                    data: data.field, // 默认写法
                    success: function(data) {
                        if (data.code == 0) {
                            toastr_success("添加成功", function() {
                                window.location.href = '/admin/cnf/Message/templates';
                            });
                        } else {
                            toastr_error(data.message);
                        }
                    },
                    error: function() {

                    },

                });
            });



        });
    </script>